import { useTheme } from 'styled-components'
import useResponsive from '../../../hooks/useResponsive'

const Marker: React.FC<{ cx?: number; cy?: number }> = ({ cx, cy }) => {
  const { isDesktop } = useResponsive()
  const theme = useTheme()
  if (!cx || !cy) {
    return null
  }

  const size = isDesktop ? 72 : 40
  return (
    <svg
      width={size}
      x={cx - size / 2}
      y={cy - size}
      height={size}
      viewBox="0 0 79 80"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <g clipPath="url(#clip0_5504_4234)">
        <path
          d="M55.8463 53.0607C39.4211 53.0607 45.9912 72.7709 39.4211 79.341C32.851 72.7709 39.4211 53.0607 22.9959 53.0607C19.3659 53.0607 16.4258 50.1205 16.4258 46.4906V13.6402C16.4258 10.0102 19.3659 7.07007 22.9959 7.07007H55.8463C59.4763 7.07007 62.4164 10.0102 62.4164 13.6402V46.4906C62.4164 50.1205 59.4763 53.0607 55.8463 53.0607Z"
          fill={theme.color.primary}
        />
        <path
          d="M28.462 35.0015V29.5193L23.6582 21.9835H26.7385L29.7821 26.9157L32.8441 21.9835H35.9427L31.1206 29.5376V35.0015H28.462ZM42.5721 33.828C41.6309 34.7448 40.4942 35.2032 39.1618 35.2032C37.8295 35.2032 36.6927 34.7448 35.7515 33.828C34.8103 32.899 34.3397 31.7623 34.3397 30.4177C34.3397 29.0853 34.8103 27.9547 35.7515 27.0257C36.6927 26.0967 37.8295 25.6322 39.1618 25.6322C40.4942 25.6322 41.6309 26.0967 42.5721 27.0257C43.5133 27.9547 43.9839 29.0853 43.9839 30.4177C43.9839 31.7623 43.5133 32.899 42.5721 33.828ZM39.1618 32.8563C39.8097 32.8563 40.3475 32.6301 40.7753 32.1779C41.2153 31.7134 41.4354 31.1266 41.4354 30.4177C41.4354 29.7087 41.2153 29.1281 40.7753 28.6758C40.3475 28.2114 39.8097 27.9791 39.1618 27.9791C38.5017 27.9791 37.9517 28.2114 37.5117 28.6758C37.0838 29.1281 36.8699 29.7087 36.8699 30.4177C36.8699 31.1266 37.0838 31.7134 37.5117 32.1779C37.9517 32.6301 38.5017 32.8563 39.1618 32.8563ZM49.1324 35.2032C48.0445 35.2032 47.195 34.8364 46.5838 34.103C45.9849 33.3696 45.6854 32.3857 45.6854 31.1511V25.8339H48.1973V30.7294C48.1973 32.184 48.7168 32.9113 49.7558 32.9113C50.3425 32.9113 50.8009 32.6912 51.1309 32.2512C51.4732 31.8112 51.6443 31.1633 51.6443 30.3077V25.8339H54.1562V35.0015H51.6443V33.9564C51.082 34.7876 50.2447 35.2032 49.1324 35.2032Z"
          fill="white"
        />
      </g>
      <defs>
        <clipPath id="clip0_5504_4234">
          <rect width="78.841" height="78.841" fill="white" transform="translate(0 0.5)" />
        </clipPath>
      </defs>
    </svg>
  )
}

export default Marker
